<template>
    <div
        class="menus-box"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div class="role-right">
            <el-button icon="el-icon-plus" type="primary" size="mini" style="margin-bottom: 30px" @click="addOrUpdateHandle(null, 1)"
                >新增</el-button
            >

            <!-- 查询结果 -->
            <ResultListPanel
                tableRef="table"
                ref="multipleTable"
                :data="dataList ? dataList : []"
                :listConfig="resultColConfig"
                :tagTextExchange="tagTextExchange"
                :listLoading="listLoading"
                @actionClick="actionClick"
            ></ResultListPanel>
        </div>

        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDom" @refreshDataList="getList"></add-or-update>
    </div>
</template>
<script>
import addOrUpdate from './add-or-update';
import { INDEX_SEARCH_CONFIG, INDEX_SEARCH_RESULT_ITEMS } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import { mapGetters } from 'vuex';

import { homeImgType } from '../../utils/util';

export default {
    components: {
        addOrUpdate,
        ResultListPanel,
        SearchPanel
    },

    data() {
        return {
            dataListLoading: false,
            addOrUpdateVisible: false,
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表
            type: 1,
            loading: false
        };
    },

    mounted() {
        this.getList();
    },
    methods: {
        /***
         * 触发 行操作按钮
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            if (item.alias === 'edit') {
                this.addOrUpdateHandle(data, 2);
            } else if (item.alias === 'del') {
                this.delete(data);
            }
        },

        tagTextExchange([data, item]) {
            //类型
            if (item.alias == 'type') {
               return homeImgType(data.type);
            }

        },

        // 新增或者编辑
        addOrUpdateHandle(items, type) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                // 编辑
                if (type == 2) {
                    this.$refs.addOrUpdateDom.init(cloneDeep(items), type);
                } else {
                    this.$refs.addOrUpdateDom.init(null, type, this.appId);
                }
            });
        },

        // 删除
        delete(row) {
            console.log(row);
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    if (action !== 'cancel') {
                        this.listLoading = true;
                        API.homeImg.deleteHomeImg({ id: row.id }).then((res) => {
                            this.listLoading = false;
                            if (res.code == '0000') {
                                this.$message({
                                    type: 'success',
                                    message: `删除成功`
                                });
                                this.getList();
                            }
                        });
                    }
                }
            });
        },

        getList() {
            this.listLoading = true;
            API.homeImg.getImgList().then((res) => {
                console.log(res);
                this.listLoading = false;
                if (res.code == '0000') {
                    this.dataList = res.result.rows;
                    //单独处理图片显示
                     var imgUrlQz = window.baseUrl + '/sys/file/showpic?id=';

                    if(this.dataList!=null&&this.dataList.length>0){
                        for (let index = 0; index < this.dataList.length; index++) {
                            const element = this.dataList[index];
                            element.pictureUrl=imgUrlQz+this.spimgurl(element.pictureUrl);
                        }
                    }
                }
            });
        },
          //处理图片分隔
    spimgurl(value) {
      if (value != null) {
        let ff = value.split(",");
        if (ff != null && ff.length > 0) {
          const element = ff[0];
          var elmentList = element.split(":");
          return elmentList[0];
        }
      }
      return "";
    },
    }
};
</script>
<style scoped>
.menus-box {
    background: #fff;
    padding: 20px;
    min-height: 100%;
}
</style>